const path = require('path');
const {
  merge
} = require('webpack-merge')
const {
  DefinePlugin
} = require('webpack');

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractWebpackPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const EslintWebpackPlugin = require('eslint-webpack-plugin');

const devConfig = require('./webpack.dev.js');
const prodConfig = require('./webpack.prod.js');

const commonConfig = isProd => {
  return {
    entry: './src/main.js',
    output: {
      filename: '[name].build.js',
      path: path.resolve(__dirname, 'dist')
    },
    resolve: {
      extensions: ['.js', '.json', '.vue'],
    },
    module: {
      rules: [{
          test: /\.js$/,
          exclude: /node_modules/,
          use: ['babel-loader']
        },
        {
          test: /\.vue$/,
          use: ['vue-loader']
        },
        {
          test: /\.css$/,
          use: [
            isProd ? MiniCssExtractWebpackPlugin.loader : 'style-loader',
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                esModule: false
              }
            },
            'postcss-loader'
          ]
        },
        {
          test: /\.less$/,
          use: [
            isProd ? MiniCssExtractWebpackPlugin.loader : 'style-loader',
            {
              loader: 'css-loader',
              options: {
                importLoaders: 2,
                esModule: false
              }
            },
            'less-loader',
            'postcss-loader'
          ]
        },
        {
          test: /\.(png|svg|gif|jpe?g)$/,
          use: [{
            loader: 'url-loader',
            options: {
              name: 'img/[name].[hash:6].[ext]',
              limit: 10 * 1024,
              esModule: false
            }
          }]
        },
        {
          test: /\.(ttf|woff2?)$/,
          use: [{
            loader: 'url-loader',
            options: {
              name: 'font/[name].[hash:6].[ext]',
              limit: 1 * 1024
            }
          }]
        },
        // {
        //   test: /\.(png|svg|gif|jpe?g)$/,
        //   type: 'asset',
        //   generator: {
        //     filename: 'img/[name].[hash:4][ext]'
        //   },
        //   parser: {
        //     dataUrlCondition: {
        //       maxSize: 25 * 1024
        //     }
        //   }
        // },
        // {
        //   test: /\.(ttf|woff2?)$/,
        //   type: 'asset/resource',
        //   generator: {
        //     filename: 'font/[name].[hash:3][ext]'
        //   }
        // },
        // {
        //   enforce: 'pre',
        //   test: /\.(js|vue)$/,
        //   use: 'eslint-loader',
        //   exclude: [
        //     path.resolve(__dirname, './node_modules')
        //   ]
        // }
      ]
    },
    plugins: [
      new VueLoaderPlugin(),
      new DefinePlugin({
        BASE_URL: '"./"'
      }),
      new HtmlWebpackPlugin({
        title: '前端',
        template: './public/index.html'
      }),
      new EslintWebpackPlugin({
        fix: true,
        extensions: ['js', 'vue'],
        exclude: 'node_modules'
      })
    ]
  }
}

module.exports = env => {
  const isProd = env.production;
  const config = isProd ? prodConfig : devConfig;

  process.env.NODE_ENV = isProd ? 'production' : 'development'

  return merge(commonConfig(isProd), config)
}